<!DOCTYPE html>
<html>
<head>
    <title>SMACCMPilot Heads Up Display</title>

    <!-- Bootstrap core CSS -->
    <link href="/bootstrap-3.3.4-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap theme -->
    <link href="/bootstrap-3.3.4-dist/css/bootstrap-theme.min.css" rel="stylesheet">

    <style>
      #black-overlay{
          display: none;
          position: absolute;
          top: 0%;
          left: 0%;
          width: 100%;
          height: 100%;
          background-color: black;
          z-index:1001;
          -moz-opacity: 0.8;
          opacity:.80;
          filter: alpha(opacity=80);
      }

      #error-wrapper {
	  position: absolute;
	  left: 50%;
	  top: 15%;
      }

      #error-message {
          display: none;
          position: relative;
	  left: -50%;
          height: 150px;
          line-height: 150px;
	  padding: 0px 40px;
          border: 2px solid red;
          background-color: black;
          color: red;
          z-index:1002;
          text-align: center;
          font-family: monospace;
          font-size: 70px;
	  white-space: nowrap;
      }

      #pfd-view {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 50%;
      }

      #target-view {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 50%;
        height: 50%;
        border: 0.5ex solid black;
      }

      #status-column {
        position: absolute;
        padding: 1em;
        top: 0;
        right: 0;
        width: 50%;
        height: 100%;
      }
    </style>
</head>
<body role="document">
    <div id="black-overlay"></div>

    <div id="error-wrapper">
      <div id="error-message">
        test
      </div>
    </div>

    <canvas id="pfd-view" width="500" height="350"></canvas>

    <canvas id="target-view"></canvas>

    <div id="status-column">

    <div id="status-view"></div>

    <div id="gyro-cal-progress">
      Gyro calibration:
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0"
             aria-valuemin="0" aria-valuemax="1" style="min-width: 2em">
          <span class="progress-bar-label">?</span>
        </div>
      </div>
    </div>

    <div id="mag-cal-progress">
      Mag calibration:
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0"
             aria-valuemin="0" aria-valuemax="1" style="min-width: 2em">
          <span class="progress-bar-label">?</span>
        </div>
      </div>
    </div>

    <div id="accel-cal-progress">
      Accel calibration:
      <div class="progress">
        <div class="progress-bar" role="progressbar" aria-valuenow="0"
             aria-valuemin="0" aria-valuemax="1" style="min-width: 2em">
          <span class="progress-bar-label">?</span>
        </div>
      </div>
    </div>

    </div>

    <script src="/underscore-1.8.3.js"></script>
    <script src="/jquery-2.1.3.js"></script>
    <script src="/backbone-1.1.2.js"></script>
    <script src="/bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
    <script src="/paper-core-0.9.15.js"></script>
    <script src="/stats.min.js"></script>
    <script src="/uitest.js"></script>
    <script src="/bbox.js"></script>
    <script src="/pfd.js"></script>
    <script src="/reboot.js"></script>
<script>
$(function() {

var CameraTarget = Backbone.Model.extend({
  urlRoot: '/controllable_vehicle_i/camera_target_input'
});

var cameraTarget = new CameraTarget({});
var cameraTargetView = new BBoxView({ model: cameraTarget, el: '#target-view' });

var PackedStatus = Backbone.Model.extend({
  urlRoot: '/controllable_vehicle_i/packed_status'
});
var packedStatus = new PackedStatus({});

// sensors_output valid/roll/pitch/yaw/baro_alt
// gps_output fix/num_sv/lat/lon/alt/vground/heading

var pfdView = new PFDView({ model: packedStatus, el: '#pfd-view' });

// gyro_output_calibration.progress
// accel_output_calibration.progress
// mag_output_calibration.progress
// arming_status rcinput/telem/px4io/sens_cal
// control_law arming_mode; control_modes ui_mode/yaw_mode/thr_mode

var gyroCalibrationView = new UserInputSliderView({
  el: '#gyro-cal-progress',
  model: packedStatus,
  accessor: function (json) { return json.gyro_progress; },
});

var accelCalibrationView = new UserInputSliderView({
  el: '#accel-cal-progress',
  model: packedStatus,
  accessor: function (json) { return json.accel_progress; },
});

var magCalibrationView = new UserInputSliderView({
  el: '#mag-cal-progress',
  model: packedStatus,
  accessor: function (json) { return json.mag_progress; },
});

var controlLawView = new ControlLawView({ model: packedStatus, el: '#status-view' });
_.each(['rcinput', 'telem', 'px4io', 'sens_cal'], function (field) {
  $('#status-view').append(new ButtonGroupView({
    label: field,
    field: field,
    values: [ 'Negative', 'Neutral', 'Positive' ],
    model: packedStatus,
    writable: false,
  }).el);
});

var Reboot = Backbone.Model.extend({
  urlRoot: '/controllable_vehicle_i/reboot_req'
});
var reboot = new Reboot({});
$('#status-column').append(new RebootButtonView({ model: reboot }).el);

var stats = new Stats();
stats.setMode(0); // 0: fps, 1: ms, 2: mb

// align top-left
stats.domElement.style.position = 'absolute';
stats.domElement.style.right = '0px';
stats.domElement.style.top = '0px';
document.body.appendChild(stats.domElement);

errors = 0;
lastMessage = new Date().getTime();

function hideError() {
  $("#black-overlay").css("display", "none");
  $("#error-message").css("display", "none");
}

function showError() {
  $("#black-overlay").css("display", "block");
  $("#error-message").css("display", "block");
}

function refreshErrorMessage() {
  delay = (new Date().getTime() - lastMessage) / 1000.0;
  $('#error-message').text("Connection lost: " + delay.toFixed(1) + "s");
}

setInterval(refreshErrorMessage, 100);

function fetchThen(model, next) {
  model.fetch({ timeout: 1500 }).done(function() {
    errors = 0;
    lastMessage = new Date().getTime();
    hideError();
    next();
  }).fail(function (jqXHR, textStatus, errorThrown) {
    errors++;
    if (errors == 5) {
      showError();
    }
    if (errorThrown == "timeout") {
      next();
    } else {
      setTimeout(next, 1500);
    }
  });
}

function fetchBegin() {
  stats.begin();
  fetchCameraTarget();
}
function fetchCameraTarget() {
  fetchThen(cameraTarget, fetchPackedStatus);
}
function fetchPackedStatus() {
  fetchThen(packedStatus, fetchDone);
}
function fetchDone() {
  stats.end();
  requestAnimationFrame(fetchBegin);
}
fetchBegin();

});
</script>

</body>
</html>
